<template>
    <div class='w-full h-screen bg-home-bg bg-cover p-40px overflow-hidden'>
        <div class="flex items-center justify-between pr-30px">
            <div class="flex items-center">
                <n-flex class="cursor-pointer max-w-max" align="center" :size="22" @click="backGo">
                    <img class="w-24px" :src="iconArrowL" alt="">
                    <span class="text-[#fff] font-600 text-xl">搜索结果</span>
                    
                </n-flex>
                <div class="text-[#fff] font-600 text-xl ml-12">共找到个
                        <span class="text-[#FF8A4F]">{{ matterData.length }}</span>
                        结果</div>
            </div>
            <n-input class="dark-input" v-model:value="keyWord" placeholder="请输入事项" clearable @clear="clearSearch" @keyup.enter.native="searchHandle">
                <template #prefix>
                    <img class="w-17px h-17px" :src="iconSearch" alt="">
                </template>
            </n-input>
        </div>

        <div class="search-content">
            <ul class="pr-20px" v-if="matterData.length">
                <li class="matter-li" v-for="item in matterData" :key="item.uuid" @click="openUrl(item.file_or_url)">
                    <span class="text-base text-[#fff] truncate max-w-[90%]" v-html="highlightText(item.name)"></span>
                    <img class="w-20px h-20px" :src="iconArrowR" alt="">
                </li>
            </ul>
            <div class="flex items-center flex-col xy-center" v-else>
                <img class="w-121px h-124px" src="/no-data.png" alt="">
                <span class="text-[#cbd5e1] text-base">暂无数据</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import iconArrowL from "@/assets/image/icon/icon-arrow-l.png"
    import iconSearch from "@/assets/image/icon/icon-search.png"
    import iconArrowR from "@/assets/image/icon/icon-arrow-r.png"
    import { getMatterItemApi, type MatterItemRes } from "@/api/home"
    import { openUrl } from "@/utils"

    const props = defineProps<{
        keyWord: string
    }>()

    const emit = defineEmits(['update:show'])
    const keyWord = ref('')
    const matterData = ref<MatterItemRes[] | []>([])
    onMounted(() => {
        console.log(props.keyWord);
        
        keyWord.value = props.keyWord
        renderMatterData()
    })

    async function renderMatterData() {
        const { items } = await getMatterItemApi({page: 1, page_size: 999, name: unref(keyWord)})
        if(items.length) {
            matterData.value = items
        }
    }

    const highlightText = computed(() => {
        return (name:string) => {
            let regex = new RegExp(unref(keyWord), 'gi');
            return name.replace(regex, '<span style="color: #FF8A4F;">$&</span>');
        }
    })

    const searchHandle = () => {
        renderMatterData()
    }

    const clearSearch = () => {
        keyWord.value = ''
        renderMatterData()
    }

    const backGo = () => {
        emit('update:show', false)
    }
</script>

<style lang="scss" scoped>
    .search-content {
        position: relative;
        min-height: 300px;
        height: calc(100% - 54px);
        padding: 23px 10px 24px 30px;
        background: radial-gradient( 157% 209% at 50% 13%, rgba(9, 156, 210, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.73), rgba(255, 255, 255, 0.08)) 1 1;
        margin-top: 16px;
        overflow-y: auto;

        .matter-li {
            display: flex;
            justify-content: space-between;
            padding: 20px 0 20px 10px;
            border-bottom: 1px dashed rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all .3s;

            &:hover {
                background: rgba(255,255,255,0.3);
            }

            &:last-child {
                border-bottom: 0;
            }
        }
    }
</style>